<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>

<body>
<div class="container-fluid" id="view">
    <div class="row">
        <div class="col-md-6 col-xl-4">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
            <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
              <i class="mdi mdi-link fs-4"></i>
            </span>
                        <span class="fs-4 scroll-numbers">{{d.nginx.connections}}</span>
                    </div>
                    <div class="text-end">当前连接</div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-4">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
  	        <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
              <i class="mdi mdi-link-off fs-4"></i>
            </span>
                        <span class="fs-4 scroll-numbers">{{d.nginx.accept}}</span>
                    </div>
                    <div class="text-end">接受连接</div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-4">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
  	        <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
              <i class="mdi mdi-swap-vertical fs-4"></i>
            </span>
                        <span class="fs-4 scroll-numbers">{{d.nginx.requests}}</span>
                    </div>
                    <div class="text-end">请求总量</div>
                </div>
            </div>
        </div>

    </div>

    <div class="row">

        <div class="col-lg-12">
            <div class="card">
                <header class="card-header"><div class="card-title">当前环境</div></header>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>参数</th>
                                <th>值</th>
                            </tr>
                            </thead>
                            <tbody id="stats">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/chart.min.js"></script>
<!-- 数字动态滚动增加效果 -->
<!--<script type="text/javascript" src="js/scroll-numbers.js"></script>-->
<!--引入chart插件js-->
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/layer/layui.js"></script>
<script type="text/javascript">
    ready(function() {
        var viewHtml = '';
        layui.use(['zhanshop'], function(){
            var $ = layui.$;
            viewHtml = $("#view").html();
            var zhanshop = layui.zhanshop;

            window.loadView = function (){
                zhanshop.view(API_ADDRESS + apiUrlMain, '#view', function(data){
                    var num = 0;
                    var statsHtml = "";
                    for(var i in data.stats){
                        statsHtml+= "<tr>\n" +
                            "                <td>"+num+"</td>\n" +
                            "                <td>"+i+"</td>\n" +
                            "                <td>"+data.stats[i]+"</td>\n" +
                            "              </tr>";
                        num++;
                    }
                    $("#stats").html(statsHtml);

                }, "GET", '', {}, false);
            }

            loadView();

            // 设置一个1000毫秒后执行的定时任务
            setTimeout(function() {
                $("#view").html(viewHtml);
                loadView();
            }, 60000);
        })
    });

</script>
</body>
</html>